<template>
  <div class="home">
    <!-- <div class="header">
      <div class="btn-list btn-list-left">
        <div class="left-content">
          <i :class="['el-icon-s-home']" @click="toPath(routesDict[0])" style="
              font-size: 34px;
              color: white;
              cursor: pointer;
              display: inline-block;
              margin-right: 25px;
            "></i>
          <i :class="['el-icon-s-tools']" @click="toPath(routesDict[0])" style="
              font-size: 34px;
              color: white;
              cursor: pointer;
              display: inline-block;
              margin-right: 25px;
            "></i>
          <div class="dateTime" style="">
            <span class="time">{{ time }}</span>
            <span>{{ date }}星期{{ week }}</span>
          </div>
        </div>
        <div :class="topMenuActive == routesDict[1] ? 'btn-active' : 'btn'" @click="toPath(routesDict[1])"
          style="display: flex; align-items: center; justify-content: center; padding-left: 10px;">
          采集点信息管理
        </div>
        <div :class="topMenuActive == routesDict[2] ? 'btn-active' : 'btn'" @click="toPath(routesDict[2])"
          style="display: flex; align-items: center; justify-content: center;">
          样本基本信息管理
        </div>
      </div>
      <h1 class="title">{{ title }}</h1>
      <div class="btn-list btn-list-right">
        <div :class="topMenuActive == routesDict[3] ? 'btn-active' : 'btn'" @click="toPath(routesDict[3])">
          样本处理信息管理
        </div>
        <div :class="topMenuActive == routesDict[4] ? 'btn-active' : 'btn'" @click="toPath(routesDict[4])">
          树轮成果管理
        </div>
        <i :class="['el-icon-s-data']" @click="toPath(routesDict[0])" style="
            font-size: 36px;
            color: white;
            cursor: pointer;
            display: inline-block;
            margin-right: 25px;
          "></i>
        <i :class="['el-icon-message-solid']" @click="toPath(routesDict[0])" style="
            font-size: 36px;
            color: white;
            cursor: pointer;
            display: inline-block;
            margin-right: 25px;
          "></i>
        <div class="weather">
          <img src="../assets/images/header/u22.png" alt="" />
          <span style="margin-top: 8px">晴24°C</span>
        </div>
      </div>
    </div> -->
    <div class="content">

      <div id="map-container" style="width: 100%;height: 100vh;">
        <div class="popup" ref="popup">
          <popInfo ref="popInfo"  @showYearTable="showComponentC" @showRawData="showComponentD" @showCrossData="showComponentE" />
          <!-- <point-pop ref="pointPop" /> -->
        </div>
        <timeline ref="timeline" v-show="showC"/>
        <rawData ref="rawData" v-show="showD"/>
        <crossData ref="crossData" v-show="showE"/>
        <sampleMapTool :map="dzMap" @clearLayer="clearLayer" style="">
        </sampleMapTool>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
import DZMap from "../map/index.js";
import JSONData from "../map/中华人民共和国省级.json";
import Overlay from "ol/Overlay";
import timeline from "../views/home/timeline.vue";
import rawData from "../views/home/raw-measurement-data.vue";
import crossData from "../views/home/cross-dating-data.vue";
import popInfo from "./home/pop.vue";
import sampleMapTool from "../components/sampleMapTool.vue"

export default {
  name: "HomeView",
  components: {
    popInfo,
    timeline,
    rawData,
    crossData,
    sampleMapTool
  },
  data() {
    return {
      showC: false,
      showD: false,
      showE: false,
      topMenuActive: 0,
      popup: null,
      map: null,
      dzMap: null,
      vectorLayer: null,
      vectorSource: null,
    };
  },
  methods: {
    showComponentC() {
      // 先判断是否已经显示过并且当前处于隐藏状态
      if (!this.showC) {
        this.showC = true;
      }
      console.log(this.showC,"111111111111111111");
      if (this.$refs.timeline) {
        this.$refs.timeline.showtimeline();
      }
    },
    showComponentD() {
      // 先判断是否已经显示过并且当前处于隐藏状态
      if (!this.showD) {
        this.showD = true;
      }
      console.log(this.showD,"111111111111111111");
      if (this.$refs.rawData) {
        this.$refs.rawData.showRawData();
      }
    },
    showComponentE() {
      // 先判断是否已经显示过并且当前处于隐藏状态
      if (!this.showE) {
        this.showE = true;
      }
      console.log(this.showE,"111111111111111111");
      if (this.$refs.crossData) {
        this.$refs.crossData.showRawData();
      }
    },
    initMap() {

      this.dzMap = new DZMap("map-container");
      let features = this.dzMap.format.converGeoJsonToFeature(JSONData); //json转feature
      console.log(features)
      this.geom = features[0].getGeometry(); //获取geometry对象
      this.dzMap.layer.initLayer(this.geom);
      // this.boundaryLayer = this.dzMap.layer.createMaskLayer("行政区域遮罩图层"); //zindex为10
      // this.boundaryLayer.getSource().clear();
      this.dzMap.panTo([107.33, 32.9], 5);
    },
    addOverlay() {
      this.dzMap.map.on("click", (event) => {
        const feature = this.dzMap.map.forEachFeatureAtPixel(
          event.pixel,
          (f) => {
            console.log(f, "@@@@@@@@@@@@@@@@@@@@@@@@@@", event);
            return f;
          }
        );
        if (feature) {
          if (feature.values_.markerInfo != undefined) {
            console.log(feature.values_.markerInfo, "#######################");
            this.pointInfo = feature.values_.markerInfo;
            if (this.popup == null) {
              let elPopup = this.$refs.popup;
              this.popup = new Overlay({
                element: elPopup,
                position: null,
                offset: [0, -8],
                positioning: "bottom-center",
              });
              this.dzMap.map.addOverlay(this.popup);
            }
            this.popup.setPosition(feature.values_.geometry.flatCoordinates);
            // this.popup.setVisible(true);
            this.dzMap.panTo(feature.values_.geometry.flatCoordinates, 5);
            // 调用子组件的 showCard 方法以显示弹窗
            if (this.$refs.popInfo) {
              this.$refs.popInfo.showCard();
            }
          }
        }
      });
      // 创建Overlay
      let elPopup = this.$refs.popup;
      this.popup = new Overlay({
        element: elPopup,
        // 弹窗的定位位置，初始时可以设置为null，之后通过setPosition方法动态设置
        // position: null,
        offset: [0, -8],
        //弹窗定位-'top-left','top-right','bottom-left','bottom-right'
        positioning: "bottom-center",
      });
      this.dzMap.map.addOverlay(this.popup);
    },
    showQxyjPoint(info) {
      if (info.length == 0) {
        return;
      }
      //加点
      info.forEach((item) => {
        this.dzMap.marker.addMarker(
          item.lon || item.center[0],
          item.lat || item.center[1],
          this.jcMakerLayer,
          {
            imgUrl: require(`../assets/images/header/point.png`),
            scale: 1.2, //大小
            radius: 15,
            pBorderColor: "#000000",
            pBorderWidth: 1,
            pFillColor: "",
          },
          item.zhdnm
        );
      });
    },
    creatAllLayers() {
      this.jcMakerLayer = this.dzMap.layer.createVectorLayer("点图层");
    },
    clearAllLayers() {
      this.jcMakerLayer.getSource().clear();
    },
    clearLayer() {
      this.dzMap.interaction.clearDraw();
      this.$refs.mapTool.tipVisable = false;
      // //清除站点
      // let yhdLayer = this.dzMap.layer.getLayerByName("隐患点图层");
      // let fxqLayer = this.dzMap.layer.getLayerByName("风险区图层");
      //清除图片
      yhdLayer.getSource().clear();
      fxqLayer.getSource().clear();
      // this.pointClearFlag=!this.pointClearFlag;
    },
  },
  
  mounted() {
    setInterval(() => {
      this.time = dayjs().format("HH:mm:ss");
    }, 1000);
    this.initMap();
    this.creatAllLayers();
    this.dzMap.layer.createAreaLineLayer(JSONData);
    this.showQxyjPoint([
      {
        lon: 111.4737,
        lat: 31.2304,
        zhdtype: "type1",
        zhdnm: "Label1",
        center: [111.4737, 31.2304],
      },
      {
        lon: 117.4767,
        lat: 31.2304,
        zhdtype: "type2",
        zhdnm: "Label2",
        center: [117.4767, 31.2304],
      },
      {
        lon: 112.4737,
        lat: 35.2304,
        zhdtype: "type1",
        zhdnm: "Label1",
        center: [112.4737, 35.2304],
      },
      {
        lon: 116.4767,
        lat: 37.2304,
        zhdtype: "type2",
        zhdnm: "Label2",
        center: [116.4767, 37.2304],
      },
      {
        lon: 118.4737,
        lat: 39.2304,
        zhdtype: "type1",
        zhdnm: "Label1",
        center: [118.4737, 39.2304],
      },
      {
        lon: 119.4767,
        lat: 31.2304,
        zhdtype: "type2",
        zhdnm: "Label2",
        center: [119.4767, 31.2304],
      },
      {
        lon: 118.4737,
        lat: 40.2304,
        zhdtype: "type1",
        zhdnm: "Label1",
        center: [118.4737, 39.2304],
      },
      {
        lon: 119.4767,
        lat: 40.2304,
        zhdtype: "type2",
        zhdnm: "Label2",
        center: [119.4767, 31.2304],
      },
      {
        lon: 115.4737,
        lat: 37.5704,
        zhdtype: "type1",
        zhdnm: "Label1",
        center: [115.4737, 37.5704],
      },
      {
        lon: 113.4767,
        lat: 37.2304,
        zhdtype: "type2",
        zhdnm: "Label2",
        center: [113.4767, 37.2304],
      },
      {
        lon: 101.4537,
        lat: 31.2304,
        zhdtype: "type3",
        zhdnm: "Label3",
        center: [101.4537, 31.2304],
      },
      {
        lon: 100.4537,
        lat: 31.2304,
        zhdtype: "type3",
        zhdnm: "Label3",
        center: [100.4537, 31.2304],
      },
      {
        lon: 101.4537,
        lat: 39.2304,
        zhdtype: "type3",
        zhdnm: "Label3",
        center: [101.4537, 39.2304],
      },
      {
        lon: 101.4537,
        lat: 37.2304,
        zhdtype: "type3",
        zhdnm: "Label3",
        center: [101.4537, 37.2304],
      },

      {
        lon: 101.4537,
        lat: 39.2304,
        zhdtype: "type3",
        zhdnm: "Label3",
        center: [101.4537, 39.2304],
      },
      {
        lon: 101.5537,
        lat: 36.2304,
        zhdtype: "type3",
        zhdnm: "Label3",
        center: [101.5537, 36.2304],
      },
      {
        lon: 100.4537,
        lat: 32.2304,
        zhdtype: "type3",
        zhdnm: "Label3",
        center: [100.4537, 32.2304],
      },
      {
        lon: 102.4537,
        lat: 39.2304,
        zhdtype: "type3",
        zhdnm: "Label3",
        center: [102.4537, 39.2304],
      },
      {
        lon: 98.4537,
        lat: 39.2304,
        zhdtype: "type3",
        zhdnm: "Label3",
        center: [98.4537, 39.2304],
      },
      {
        lon: 95.4537,
        lat: 37.2304,
        zhdtype: "type3",
        zhdnm: "Label3",
        center: [95.4537, 37.2304],
      },
      {
        lon: 96.4537,
        lat: 36.2304,
        zhdtype: "type3",
        zhdnm: "Label3",
        center: [96.4537, 36.2304],
      },
      {
        lon: 99.5537,
        lat: 39.2304,
        zhdtype: "type3",
        zhdnm: "Label3",
        center: [99.5537, 39.2304],
      },
      {
        lon: 80.4537,
        lat: 39.2304,
        zhdtype: "type3",
        zhdnm: "Label3",
        center: [80.4537, 39.2304],
      },
      {
        lon: 85.4537,
        lat: 38.2304,
        zhdtype: "type3",
        zhdnm: "Label3",
        center: [85.4537, 38.2304],
      },
      {
        lon: 83.4537,
        lat: 39.2304,
        zhdtype: "type3",
        zhdnm: "Label3",
        center: [83.4537, 39.2304],
      },
    ]);
    this.addOverlay();
  },

};
</script>

<style lang="scss" scoped>

.content {
  position: relative;
  top: -50px;
  /* 根据需要调整这个值 */
}
#map-container {
     width: 100%;
     height: 100vh;
     position: absolute;
     top: 70px; /* 假设导航栏高度为 110px */
   }
</style>